<template>
    <div class="tr">
        <div class="tr-top">
            <div class="add-ev">
                <div v-if="isAdd == true"><el-button  size="large"
                    :disabled="mfData.ti_no != '' ? false : true" @click="addButtonEv" type="primary">新增保存</el-button></div>
                <div v-else>
                    <el-button  size="large" :disabled="mfData.ti_no != '' ? false : true" @click="editButtonEv"
                    type="primary">修改保存</el-button>
                    <el-button  size="large" :disabled="mfData.ti_no != '' ? false : true" @click="deleteButtonEv"
                    type="primary">删除</el-button>
                </div>
                

              
            </div>
            <div style="display: flex;justify-content: center;">
                <selectTiNo ref="refselectino" @getBilDataEv="getBilDataEv" />

                <div>
                    <el-checkbox :true-value="'T'" v-model="mfData.type1" label="第一次" size="large" />
                    <el-checkbox :true-value="'T'" v-model="mfData.type2" label="第二次" size="large" />
                    <el-checkbox :true-value="'T'" v-model="mfData.type3" label="关键料" size="large" />
                    <el-checkbox :true-value="'T'" v-model="mfData.type4" label="一般料" size="large" />
                    <el-checkbox :true-value="'T'" v-model="mfData.type5" label="试产" size="large" />
                    <el-checkbox :true-value="'T'" v-model="mfData.type6" label="量产" size="large" />
                </div>
            </div>
            <div>
                <el-descriptions class="margin-top" title="" :column="4" size="default" border>

                    <el-descriptions-item min-width="100px" label="供应商" label-align="right">
                        <el-input disabled v-model="mfData.cus_name" placeholder="" />
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="物料编码" label-align="right">
                        <el-input disabled v-model="mfData.prd_no" placeholder="" />
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="物料名称" label-align="right">
                        <el-input disabled v-model="mfData.prd_name" placeholder="" />
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="物料规格" label-align="right">
                        <el-input disabled v-model="mfData.spc" placeholder="" />
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="检验单号" label-align="right">
                        <el-input disabled v-model="qc_no" placeholder="" />
                    </el-descriptions-item>

                    <el-descriptions-item min-width="100px" label="检验日期" label-align="right">
                        <el-date-picker :clearable="false" style="width: 100%;" v-model="mfData.qc_dd" type="date"
                            placeholder="" />
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="送检单号" label-align="right">
                        <div style="display: flex;">
                            <el-input v-if="isAdd == true" @click="selectTiNoEv" readonly v-model="mfData.ti_no"
                                placeholder="请选择单号">
                                <template #append>
                                    <el-button @click="selectTiNoEv" style="font-weight: bold; color: white; background-color: #007FFD;">选择</el-button>
                                </template>
                            </el-input>
                            <el-input v-else readonly v-model="mfData.ti_no" placeholder="请选择单号">
                            </el-input>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="批量AQL" label-align="right">
                        <el-row :gutter="35">
                            <el-col class="mb20" :span="8">
                                Cr={{ mfData.aql1 }}；
                            </el-col>
                            <el-col class="mb20" :span="8">
                                Ma={{ mfData.aql2 }}；

                            </el-col>
                            <el-col class="mb20" :span="8">
                                Mi={{ mfData.aql3 }}
                            </el-col>
                        </el-row>
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="收退AC/RE" label-align="right">
                        <el-row :gutter="35">
                            <el-col class="mb20" :span="8">
                                Cr={{ mfData.acre1 }}；
                            </el-col>
                            <el-col class="mb20" :span="8">
                                Ma={{ mfData.acre2 }}；

                            </el-col>
                            <el-col class="mb20" :span="8">
                                Mi={{ mfData.acre3 }}
                            </el-col>
                        </el-row>
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="来料数量" label-align="right">
                        <el-input-number style="width: 100%;" v-model="mfData.qty" :min="0" :max="mfData.max_qty" />
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="抽样数量" label-align="right">
                        <el-input-number style="width: 100%;" v-model="mfData.qty_qc" :min="0" :max="mfData.max_qty" />
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="不合格总数" label-align="right">
                        <el-row :gutter="0">
                            <el-col class="mb20" :span="8">
                                <!-- Cr={{ mfData.un_qty1 }} -->
                                <div style="display: flex; align-items: center;">
                                    <div>Cr=</div>
                                    <div style="flex: 1;"><el-input-number :controls="false" style="width: 100%;"
                                            v-model="mfData.un_qty1" :min="0" /></div>
                                </div>
                            </el-col>
                            <el-col class="mb20" :span="8">
                                <!-- Ma={{ mfData.un_qty2 }} -->
                                <div style="display: flex; align-items: center;">
                                    <div>Ma=</div>
                                    <div style="flex: 1;"><el-input-number :controls="false" style="width: 100%;"
                                            v-model="mfData.un_qty2" :min="0" /></div>
                                </div>
                            </el-col>
                            <el-col class="mb20" :span="8">
                                <!-- Mi={{ mfData.un_qty3 }} -->
                                <div style="display: flex; align-items: center;">
                                    <div>Mi=</div>
                                    <div style="flex: 1;"><el-input-number :controls="false" style="width: 100%;"
                                            v-model="mfData.un_qty3" :min="0" /></div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="检验依据" label-align="right">
                        《原材料检验规范》
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="供应商报告" label-align="right">
                        <el-upload accept="image/jpeg, image/png, application/jpg" ref="refupload2" class="upload-demo" :auto-upload="true" :limit="1"
                            :before-upload="beforeAvatarUpload2" :on-exceed="handleExceed2">
                            <template #trigger>
                                <!-- <el-button type="primary">选择文件</el-button> -->
                                <el-icon class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </template>
                            <template #tip>
                                <div>
                                    <div class="el-upload__tip text-red">
                                        仅上传一个文件
                                        仅支持['jpeg', 'jpg', 'png',]
                                    </div>
                                    <div class="url-file" @click="previewImsgeEv(2)" v-if="mfData.url2_file != ''">
                                        {{ mfData.url2_file }}
                                    </div>
                                </div>
                            </template>
                        </el-upload>
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="ROHS报告" label-align="right">
                        <!-- <el-input v-model="mfData.spc" placeholder="" /> -->
                        <!-- <el-button :icon="Plus" circle /> -->
                        <el-upload accept="image/jpeg, image/png, application/jpg"  ref="refupload1" class="upload-demo" :auto-upload="true" :limit="1"
                            :before-upload="beforeAvatarUpload1" :on-exceed="handleExceed1">
                            <template #trigger>
                                <!-- <el-button type="primary">选择文件</el-button> -->
                                <el-icon class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </template>
                            <template #tip>
                                <div>
                                    <div class="el-upload__tip text-red">
                                        仅上传一个文件
                                        仅支持['jpeg', 'jpg', 'png',]
                                    </div>
                                    <div class="url-file" @click="previewImsgeEv(1)" v-if="mfData.url1_file != ''">
                                        {{ mfData.url1_file }}
                                    </div>
                                </div>
                            </template>
                        </el-upload>
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="判定结果" label-align="right">
                        <el-radio-group v-model="mfData.fin_id">
                            <el-radio :value="'1'">合格</el-radio>
                            <el-radio :value="'2'">不合格</el-radio>
                        </el-radio-group>
                    </el-descriptions-item>
                    <!-- mf_qc_z自定义栏位 -->
                    <el-descriptions-item :span="2"  min-width="100px" label="评审判定" label-align="right">
                        <el-radio-group v-model="mfData.pdjg">
                            <el-radio style="margin-right: 5px;" :value="3">退货</el-radio>
                            <el-radio style="margin-right: 5px;" :value="6">让步接收</el-radio>
                            <el-radio style="margin-right: 5px;" :value="9">挑选/加工</el-radio>
                        </el-radio-group>
                    </el-descriptions-item>
                    <el-descriptions-item min-width="100px" label="备注" label-align="right">
                        <el-input v-model="mfData.rem" placeholder="" />
                    </el-descriptions-item>

                </el-descriptions>
            </div>
        </div>
        <div class="table-content">
         <div style="height: 100%;">
            <el-table size="small" empty-text="暂无数据" border height="100%" style="width: 100%;" :data="tfData">
                <el-table-column align="center" type="index" label="序号" width="60" fixed="left" />
                <el-table-column align="center" header-align="center" prop="qc_itm_name" label="检验项目" fixed="left"
                    width="100" />
                <el-table-column align="center" header-align="center" prop="qc_spc" label="检验内容" fixed="left"
                    width="100" />
                <el-table-column align="center" header-align="center" prop="z_zyd" label="重要度" width="100" fixed="left" />
                <el-table-column align="center" header-align="center" prop="qc_tool_name" label="检验手段" width="100" fixed="left" />
                <el-table-column align="center" header-align="center" prop="qc_mth" label="抽样/接受标准" width="150" fixed="left" />
                <el-table-column align="center" header-align="center" prop="z_cyqty" label="抽样数量" width="100" fixed="left"/>
                <el-table-column align="center" header-align="center" label="不良收退数" fixed="left" >
                    <el-table-column align="center" header-align="center" label="AQL">
                        <el-table-column align="center" header-align="center" prop="z_aql1" label="收" width="80" />
                        <el-table-column align="center" header-align="center" prop="z_aql2" label="退" width="80" />
                    </el-table-column>
                    <el-table-column align="center" header-align="center" label="实际">
                        <el-table-column align="center" header-align="center" prop="z_unqty" label="不良数" width="100" fixed="left" >
                            <template #default="scope">
                                <el-input-number :controls="false" style="width: 100%;" v-model="scope.row.z_unqty"
                                    :min="0" />
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" header-align="center" prop="spc_no" label="检验记录/不合格描述" width="150">
                    <template #default="scope">
                        <el-input style="width: 100%;" v-model="scope.row.spc_no" placeholder="" />
                    </template>
                </el-table-column>
                <!-- 写入到检验的表身自定义栏位 -->
                <el-table-column align="center" header-align="center" prop="z_rem" label="参考用样本值" width="150">
                    <template #default="scope">
                        <el-input style="width: 100%;" v-model="scope.row.z_rem" placeholder="" />
                    </template>
                </el-table-column>
                <!-- 写入到检验的表身自定义栏位 -->
                <el-table-column align="center" header-align="center" prop="z_jg" label="判定结果" width="100">
                    <template #default="scope">
                        <el-input style="width: 100%;" v-model="scope.row.z_jg" placeholder="" />
                    </template>
                </el-table-column>
                <!-- 主要不良 -->
                <el-table-column align="center" header-align="center" prop="qty_maj" label="数量1" width="100">
                    <template #default="scope">
                        <el-input-number :controls="false" style="width: 100%;" v-model="scope.row.qty_maj" :min="0" />
                    </template>
                </el-table-column>
                <!-- 次要不量 -->
                <el-table-column align="center" header-align="center" prop="qty_min" label="数量2" width="100">
                    <template #default="scope">
                        <el-input-number :controls="false" style="width: 100%;" v-model="scope.row.qty_min" :min="0" />
                    </template>
                </el-table-column>
                <!-- 严重不良 -->
                <el-table-column align="center" header-align="center" prop="qty_cr" label="数量3" width="100">
                    <template #default="scope">
                        <el-input-number :controls="false" style="width: 100%;" v-model="scope.row.qty_cr" :min="0" />
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" prop="rem" label="本批范围" width="100">
                    <template #default="scope">
                        <el-input style="width: 100%;" v-model="scope.row.rem" placeholder="" />
                    </template>
                </el-table-column>
            </el-table>
         </div>
        </div>
        <el-dialog :before-close="handleClose" v-model="dialogVisibleImage" title="图标预览">
            <!-- <span><img w-full :src="previewImsgeData" /></span> -->
            <span><el-image :src="previewImsgeData" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                    :preview-src-list="[previewImsgeData]" :initial-index="4" fit="cover" /></span>
        </el-dialog>
    </div>
</template>

<script setup>
import {
    Plus
} from '@element-plus/icons-vue'
import selectTiNo from '@/views/poty/components/selectTiNo.vue'
import { formatDate } from '@/utils/formatTime.js'
import { BasicMftiBilListPost, BasicMftyListPost, BasicMftyPkGet, BasicMftyPkPut, uploatFiledPost, uploatFiledGet, BasicMftyPkDelete } from '@/api/basic/index.js'
import { ref, reactive, onMounted, onActivated } from 'vue'
import { loginInfoStore, loadingStore, tabsBarStore } from '@/stores/index.js'
import { tabsIsAdd, tabsIsDelete } from '@/utils/tabs.js'
import { useRouter, useRoute } from 'vue-router'
const loginInfoStoreData = loginInfoStore()
const route = useRoute()
const router = useRouter();
// 顶部菜单数据
const breadcrumbDataList = tabsBarStore()
const loading = loadingStore()
const mfData = reactive({
    type1: 1,
    type2: 0,
    type3: 0,
    type4: 0,
    type5: 0,
    aql1: "",
    aql2: "",
    aql3: "",
    acre1: "",
    acre2: "",
    acre3: "",
    cus_no: "",
    cus_name: "",
    qty: 0,
    max_qty: 0,
    ty_no: "",
    qc_dd: new Date(),
    prd_no: "",
    prd_name: "",
    fin_id: 0,
    rem: "",
    pdjg: 0,
    ti_dd: "",
    ti_no: "",
    prd_mark: "",
    est_itm: "",
    sh_no_cus: "",
    cas_no: "",
    itm: "",
    bat_no: "",
    wh: "",
    bil_type: "",
    ti_itm: "",
    bil_no: "",
    url1_file: "",
    url2_file: "",
    bil_no: "",
    qty_qc:0,
    est_itm:"",
})

const qc_no = ref('')
const tfData = ref([])
const dialogVisibleImage = ref(false)
const uploadName1 = ref('')
const uploadFile1 = ref('')
const uploadName2 = ref('')
const uploadFile2 = ref('')
const previewImsgeData = ref('')
const isAdd = ref(true)
const refselectino = ref(null)
let refupload1 = ref(null)


onMounted(() => {
    console.log(route.path)
    if (route.path == '/potiedit') {
        isAdd.value = false
        console.log('进入编辑')
        console.log(sessionStorage.getItem("editQcno"))
        if (sessionStorage.getItem("editQcno") == null) {
            ElMessage.error('检验单号不能为空')
        } else {
            qc_no.value = sessionStorage.getItem("editQcno")
            getPkDataEv(sessionStorage.getItem("editQcno"))
        }

    } else {
        isAdd.value = true
        console.log('进入新增')
    }
})
onActivated(() => {

})

const addButtonEv = async () => {

    try {
        loading.loading = true
        const parData = {}
        mfData.qc_dd = formatDate(mfData.qc_dd, 'YYYY-mm-dd')
        parData.mfData = mfData
        parData.tfData = tfData.value

        let arr_data = await BasicMftyListPost(parData)
        if (arr_data.status != 200) {
            return
        }
        console.log(arr_data.data)
        ElMessage.success('新增成功')
        // 关闭菜单
        tabsIsDelete({
            router: route.path
        }, breadcrumbDataList)
        const val = {
            router: '/potiedit',
            title: '来料检验编辑',
            activate: true
        }
        // 设置激活菜单
        loginInfoStoreData.menuActive = val.router
        router.push({ path: val.router })
        // 设置编辑单号
        sessionStorage.setItem("editQcno", arr_data.data.result)
        // 判断是否增加顶部菜单导航
        tabsIsAdd(val, breadcrumbDataList)
    } catch (error) {
        ElMessage.error('新增接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

const editButtonEv = async () => {
    try {
        loading.loading = true
        const parData = {}
        mfData.qc_dd = formatDate(mfData.qc_dd, 'YYYY-mm-dd')
        parData.mfData = mfData
        parData.tfData = tfData.value

        let arr_data = await BasicMftyPkPut(qc_no.value, parData)
        if (arr_data.status != 200) {
            return
        }
        await getPkDataEv(sessionStorage.getItem("editQcno"))
        ElMessage.success('修改成功')

    } catch (error) {
        ElMessage.error('修改接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 选择送检单号
const selectTiNoEv = async () => {
    refselectino.value.dialogVisibleTi = true
}

// 查询来源数据
const getBilDataEv = async (val) => {
    console.log(val)
    const parData = {}
    parData.ti_no = val.ti_no
    parData.itm = val.itm
    parData.prd_no = val.prd_no

    try {
        loading.loading = true
        let arr_data = await BasicMftiBilListPost(parData)
        if (arr_data.status != 200) {
            return
        }
        console.log(arr_data.data.result.mfData)
        mfData.type1 = arr_data.data.result.mfData.type1
        mfData.type2 = arr_data.data.result.mfData.type2
        mfData.type3 = arr_data.data.result.mfData.type3
        mfData.type4 = arr_data.data.result.mfData.type4
        mfData.type5 = arr_data.data.result.mfData.type5
        mfData.aql1 = arr_data.data.result.mfData.aql1
        mfData.aql2 = arr_data.data.result.mfData.aql2
        mfData.aql3 = arr_data.data.result.mfData.aql3
        mfData.acre1 = arr_data.data.result.mfData.acre1
        mfData.acre2 = arr_data.data.result.mfData.acre2
        mfData.acre3 = arr_data.data.result.mfData.acre3
        mfData.un_qty1 = arr_data.data.result.mfData.un_qty1
        mfData.un_qty2 = arr_data.data.result.mfData.un_qty2
        mfData.un_qty3 = arr_data.data.result.mfData.un_qty3
        mfData.cus_no = arr_data.data.result.mfData.cus_no
        mfData.cus_name = arr_data.data.result.mfData.cus_name
        mfData.qty = arr_data.data.result.mfData.qty
        mfData.max_qty = arr_data.data.result.mfData.max_qty
        mfData.prd_no = arr_data.data.result.mfData.prd_no
        mfData.prd_name = arr_data.data.result.mfData.prd_name
        mfData.fin_id = arr_data.data.result.mfData.fin_id
        mfData.rem = arr_data.data.result.mfData.rem
        mfData.pdjg = arr_data.data.result.mfData.pdjg
        mfData.ti_no = arr_data.data.result.mfData.ti_no
        mfData.ti_dd = arr_data.data.result.mfData.ti_dd
        mfData.prd_mark = arr_data.data.result.mfData.prd_mark
        mfData.est_itm = arr_data.data.result.mfData.est_itm
        mfData.sh_no_cus = arr_data.data.result.mfData.sh_no_cus
        mfData.cas_no = arr_data.data.result.mfData.cas_no
        mfData.itm = arr_data.data.result.mfData.itm
        mfData.bat_no = arr_data.data.result.mfData.bat_no
        mfData.wh = arr_data.data.result.mfData.wh
        mfData.bil_type = arr_data.data.result.mfData.bil_type
        mfData.bil_no = arr_data.data.result.mfData.bil_no
        mfData.ti_itm = arr_data.data.result.mfData.ti_itm
        mfData.bil_no = arr_data.data.result.mfData.bil_no
        mfData.url1_file = arr_data.data.result.mfData.url1_file
        mfData.url2_file = arr_data.data.result.mfData.url2_file
        mfData.qty_qc = arr_data.data.result.mfData.qty_qc
        mfData.est_itm = arr_data.data.result.mfData.est_itm


        tfData.value = arr_data.data.result.tfData

    } catch (error) {
        ElMessage.error('来源单查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 查询单个
const getPkDataEv = async (val) => {

    try {
        loading.loading = true
        let arr_data = await BasicMftyPkGet(val)
        if (arr_data.status != 200) {
            return
        }

        mfData.type1 = arr_data.data.result.mfData.type1
        mfData.type2 = arr_data.data.result.mfData.type2
        mfData.type3 = arr_data.data.result.mfData.type3
        mfData.type4 = arr_data.data.result.mfData.type4
        mfData.type5 = arr_data.data.result.mfData.type5
        mfData.aql1 = arr_data.data.result.mfData.aql1
        mfData.aql2 = arr_data.data.result.mfData.aql2
        mfData.aql3 = arr_data.data.result.mfData.aql3
        mfData.acre1 = arr_data.data.result.mfData.acre1
        mfData.acre2 = arr_data.data.result.mfData.acre2
        mfData.acre3 = arr_data.data.result.mfData.acre3
        mfData.un_qty1 = arr_data.data.result.mfData.un_qty1
        mfData.un_qty2 = arr_data.data.result.mfData.un_qty2
        mfData.un_qty3 = arr_data.data.result.mfData.un_qty3
        mfData.cus_no = arr_data.data.result.mfData.cus_no
        mfData.cus_name = arr_data.data.result.mfData.cus_name
        mfData.qty = arr_data.data.result.mfData.qty
        mfData.max_qty = arr_data.data.result.mfData.max_qty
        mfData.prd_no = arr_data.data.result.mfData.prd_no
        mfData.prd_name = arr_data.data.result.mfData.prd_name
        mfData.fin_id = arr_data.data.result.mfData.fin_id
        mfData.rem = arr_data.data.result.mfData.rem
        mfData.pdjg = arr_data.data.result.mfData.pdjg
        mfData.ti_no = arr_data.data.result.mfData.ti_no
        mfData.ti_dd = arr_data.data.result.mfData.ti_dd
        mfData.prd_mark = arr_data.data.result.mfData.prd_mark
        mfData.est_itm = arr_data.data.result.mfData.est_itm
        mfData.sh_no_cus = arr_data.data.result.mfData.sh_no_cus
        mfData.cas_no = arr_data.data.result.mfData.cas_no
        mfData.itm = arr_data.data.result.mfData.itm
        mfData.bat_no = arr_data.data.result.mfData.bat_no
        mfData.wh = arr_data.data.result.mfData.wh
        mfData.bil_type = arr_data.data.result.mfData.bil_type
        mfData.ti_itm = arr_data.data.result.mfData.ti_itm
        mfData.bil_no = arr_data.data.result.mfData.bil_no
        mfData.url1_file = arr_data.data.result.mfData.url1_file
        mfData.url2_file = arr_data.data.result.mfData.url2_file
        mfData.qty_qc = arr_data.data.result.mfData.qty_qc
        mfData.est_itm = arr_data.data.result.mfData.est_itm


        tfData.value = arr_data.data.result.tfData

    } catch (error) {
        ElMessage.error('检验单查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 删除数据
const deleteButtonEv = async () => {
    try {
        loading.loading = true
        let arr_data = await BasicMftyPkDelete(qc_no.value)
        if (arr_data.status != 200) {
            return
        }
        ElMessage.success('删除成功')
        // 关闭菜单
        tabsIsDelete({
            router: route.path
        }, breadcrumbDataList)
        const val = {
            router: '/potiadd',
            title: '来料检验新增',
            activate: true
        }
        // 设置激活菜单
        loginInfoStoreData.menuActive = val.router
        router.push({ path: val.router })

        // 判断是否增加顶部菜单导航
        tabsIsAdd(val, breadcrumbDataList)
    } catch (error) {
        ElMessage.error('删除接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 文件上传处理
const beforeAvatarUpload1 = async (file) => {
    uploadName1.value = file.name
    // ruleForm.size = parseFloat((file.size / 1024).toFixed(2))
    const formData = new FormData();
    // 创建 FileReader 对象
    const reader = new FileReader();
    reader.onload = (e) => {
        uploadFile1.value = e.target.result;
    };
    reader.readAsDataURL(file);
    formData.append('uploadFiled', file);
    loading.loading = true
    try {
        let arr_data = await uploatFiledPost(formData)
        if (arr_data.status != 200) {
            return
        }
        mfData.url1_file = arr_data.data.result.url
        // ruleForm.postfix = arr_data.data.result.postfix
    } catch (error) {
        ElMessage.error('文件上传失败')
    } finally {
        loading.loading = false
    }
    return false
}
const handleExceed1 = (files) => {
    refupload1.value.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    refupload1.value.handleStart(file)
}


// 文件上传处理
const beforeAvatarUpload2 = async (file) => {
    uploadName2.value = file.name
    // ruleForm.size = parseFloat((file.size / 1024).toFixed(2))
    const formData = new FormData();
    formData.append('uploadFiled', file);
    const reader = new FileReader();
    reader.onload = (e) => {
        uploadFile2.value = e.target.result;
    };
    reader.readAsDataURL(file);
    loading.loading = true
    try {
        let arr_data = await uploatFiledPost(formData)
        if (arr_data.status != 200) {
            return
        }
        console.log(arr_data.data.result)
        mfData.url2_file = arr_data.data.result.url
        // ruleForm.postfix = arr_data.data.result.postfix
    } catch (error) {
        ElMessage.error('文件上传失败')
    } finally {
        loading.loading = false
    }
    return false
}
const handleExceed2 = (files) => {
    refupload2.value.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    refupload2.value.handleStart(file)
}

const getImsgeEv = async (val1, val2) => {

    loading.loading = true
    try {
        let arr_data = await uploatFiledGet({ id: val1 })
        if (arr_data.status != 200) {
            return
        }
        console.log(arr_data.data)
        const reader = new FileReader();
        reader.onload = (e) => {
            previewImsgeData.value = e.target.result;
        };
        reader.readAsDataURL(arr_data.data);

        // if (val2==1) {
        //     previewImsgeData.value = uploadFile1.value
        // } else {
        //     previewImsgeData.value = uploadFile2.value
        // }
        // mfData.url2_file = arr_data.data.result.url
        // ruleForm.postfix = arr_data.data.result.postfix
    } catch (error) {
        ElMessage.error('文件查询失败')
    } finally {
        loading.loading = false
    }
}

const previewImsgeEv = async (val) => {
    if (val == 1) {
        console.log(previewImsgeData.value)
        console.log(mfData.url1_file)
        if (uploadFile1.value == '' & mfData.url1_file != '') {
            await getImsgeEv(mfData.url1_file, 1)
        } else {
            previewImsgeData.value = uploadFile1.value
        }
    } else {
        if (uploadFile2.value == '' & mfData.url2_file != '') {
            await getImsgeEv(mfData.url2_file, 2)
        } else {
            previewImsgeData.value = uploadFile2.value
        }
    }
    dialogVisibleImage.value = true
}

// 关闭出发事件
const handleClose = (done) => {
    previewImsgeData.value = ''
    done()
}
</script>

<style lang='less' scoped>
.tr {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

.tr-top {
    // height: 100%;
    position: relative;
    // height: 300px;
    // background-color: pink;
}

.add-ev {
    position: absolute;
    top: -5px;
    right: 5px;
}

.table-content {
    flex: 1;
    overflow-y: auto;
    // height: calc(100% - 300px);
    // height: 300px;
    // background-color: pink;
    padding-top: 10px;
    box-sizing: border-box;
}

.avatar-uploader-icon {
    font-size: 20px;
    color: #409eff;
}

.url-file {
    cursor: pointer;
}

.upload-demo {
    display: flex;
}
</style>